<template>
	<view class="ring" v-if="JSON.stringify(charts)!='{}'">
		<view class="title-wrapper">
			<view class="title" v-if="charts.title.name!=undefined">{{charts.title.name}}</view>
			<view class="btns" v-if="JSON.stringify(charts.title.btns)!='[]'">
				<view v-for="(btn, btnindex) in charts.title.btns" :key="btnindex">
					<view @click="select(btn.type)" class="btn" :class="{'active':myselectType===btn.type}">{{btn.name}}</view>
				</view>
			</view>
		</view>
		<view class="tab-wrapper" v-if="JSON.stringify(charts.tab)!='[]'">
			<view v-for="(tab,tabindex) in charts.tab" :key="tabindex">
				<view @click="selectTab(tab.type)" class="tab-item" :class="{'active':myselectTab===tab.type}">{{tab.name}}</view>
			</view>
		</view>
		<view class="subtitle" v-if="JSON.stringify(charts.subtitle)!='{}'">
			<view class="title">{{charts.subtitle.name}}</view>
			<view class="text">{{charts.subtitle.value}}</view>
		</view>
		<view class="content-wrapper" v-if="JSON.stringify(charts.chartdata.series[0].data)!='[]'">
			<qiun-data-charts style="z-index: 100;"  :opts="opts" :type="charttype" :chartData="charts.chartdata" background="none" /> 
		</view>
		<view class="bottom" @click="navito" v-if="charts.bottom.name!=undefined">{{charts.bottom.name}}</view>
	</view>
</template>


<script>
	var util = require("../../utils/util.js");
	const app = getApp().globalData;
	export default{
		data(){
			return{
				myselectType:'month',
				myselectTab:'money',
				charts:{},
				opts:{}
			}
		},
		// charts:{'title':{'btns':[]},'chartdata':{'series':[{"data":[]}]}},
		props:{
			
			charttype:{
				type: String,
				default:'area'
			}
		},
		
		
		mounted: function(options) {
			this.uploaddata()
			// opts:{'extra':{'column':{'type':'stack'}}}
		},
		
		methods:{
			navito(){
				var that = this
				var charts = that.charts
				console.log(charts)
				var modcode = charts.bottom.modcode
				var title = charts.bottom.title
				var pagename = charts.bottom.pagename
				var isdataall = charts.bottom.isdataall
				var gsdm = charts.bottom.gsdm
				var headerconditions = {"btntype":that.myselectType,"tabtype":that.myselectTab}
				if(modcode!=undefined){
					uni.navigateTo({url:'/pages/infolist/infolist?modcode='+modcode+'&title='+title+'&pagename='+pagename+'&gsdm='+gsdm+'&isdataall='+isdataall+'&headerconditions='+JSON.stringify(headerconditions)})
				}
				
			},
			
			select(type){
				this.myselectType = type
				this.uploaddata()
			},
			selectTab(type){
				this.myselectTab = type
				this.uploaddata()
			},
			
			uploaddata(){
				var that = this
				console.log('bbb')
				that.charts = {"title":{"name":"销售趋势","btns":[{"name":"本月","type":"month"},{"name":"本年","type":"year"},{"name":"去年","type":"lastyear"}]},"tab":[{"name":"按开单金额","type":"money"},{"name":"按单据量","type":"count"},{"name":"按毛利","type":"grossprofit"}],"subtitle":{"name":"开单总金额","value":"￥0.78万"},"chartdata":{"categories":["1日","2日","3日","4日","5日","6日","7日","8日","9日","10日","11日","12日","13日","14日","15日","16日","17日","18日","19日","20日","21日","22日","23日","24日","25日","26日","27日","28日","29日","30日","31日"],"series":[{"name":"销售额","data":[0,1760,0,0,0,5000,0,0,0,1069,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}]},"charttype":"area","bottom":{}}
				that.opts={}
				
				// that.charts = {
				// 	"title": {
				// 		"name": "结算分布",
				// 		"btns": [{
				// 			"name": "本日",
				// 			"type": "day"
				// 		},{
				// 			"name": "本月",
				// 			"type": "month"
				// 		}, {
				// 			"name": "本年",
				// 			"type": "year"
				// 		}, {
				// 			"name": "去年",
				// 			"type": "lastyear"
				// 		}]
				// 	},
				// 	"tab": [{
				// 		"name": "按开单金额",
				// 		"type": "money"
				// 	},{
				// 		"name": "按单据量",
				// 		"type": "count"
				// 	}],
				// 	"subtitle": {
				// 		"name": "开单总金额",
				// 		"value": "￥0.00万"
				// 	},
				// 	"categories":[],
				// 	"chartdata": {
				// 		"categories":[],
				// 		"series":[{"data":[{"name":"现金","value":11.00},{"name":"银行","value":2.00},{"name":"支付宝","value":6.00},{"name":"微信","value":40.00},{"name":"其它","value":0.00}]}]
				// 	},
				// 	"charttype": "pie",
				// 	"bottom": {
				// 	}
				// }
				
			}
		}
	}
</script>

<style>
	.ring{}
	.ring .title-wrapper{display:flex;flex-direction: row;justify-content: space-between;padding: 5px 10px;background: #fff;}
	.ring .title-wrapper .title{align-items: center;color: rgb(7,17,27);font-size: 16px;}
	.ring .title-wrapper .btns{display: flex;flex-direction: row;align-items: center;}
	.ring .title-wrapper .btns .btn{padding: 2px 10px;font-size: 12px;border-radius: 2px; background: #fff;color: #666666;border: 1px solid #DDDDDD;}
	.ring .title-wrapper .btns .btn.active{padding: 2px 10px;font-size: 12px;border-radius: 2px; background: #F0AD4E;color: #fff;}
	.ring .tab-wrapper{display: flex;flex-direction: row;padding: 10px 50px;justify-content: space-around;background-color: #fefefe;}
	.ring .tab-wrapper .tab-item{color: #666666;}
	.ring .tab-wrapper .tab-item.active{color: #F0AD4E;border-bottom: solid 1px #F0AD4E;}
	.ring .subtitle{display: flex;flex-direction: row;padding: 5px 10px;justify-content: space-between;background-color: #fafafa;}
	.ring .content-wrapper{display: flex;z-index: 100;flex-direction: row; background-color: #fff;border-top: 1px solid rgba(7,17,27,0.1);border-bottom: 1px solid rgba(7,17,27,0.1);}
	.ring .bottom{display: flex;padding: 10px; justify-content: center;align-items: center;color: rgba(7,17,27,0.5);background-color: #fff;}
</style>
